<header>
    CSS
</header>
<h2>
    简明说一下 CSS link 与 @import 的区别和用法？
</h2>
<ul>
    <li>
        link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS；
    </li>
    <li>
        页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载；
    </li>
    <li>
        import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题。
    </li>
</ul>
<h2>
    display:none和visibility:hidden的区别？
</h2>
<ul>
    <li>
        display:none 隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在。
    </li>
    <li>
        visibility:hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间。
    </li>
</ul>
<h2>
    创建图片格式(简述)，区别？
</h2>
<ul>
    <li>
        BMP:是无损的、既支持索引色也支持直接色的点阵图
    </li>
    <li>
        GIF:是无损的、采用索引色的点阵图。采用LZW压缩算法进行编码
    </li>
    <li>
        JPEG:是有损的、采用直接色的点阵图。JPEG的图片的优点是采用了直接色，得益于更丰富的色彩
    </li>
    <li>
        PNG-8:是无损的、使用索引色的点阵图
    </li>
    <li>
        PNG-24:是无损的、使用直接色的点阵图
    </li>
    <li>
        SVG:是无损的矢量图。SVG是矢量图意味着SVG图片由直线和曲线以及绘制它们的方法组成
    </li>
    <li>
        WebP:是谷歌开发的一种新图片格式，WebP是同时支持有损和无损压缩的、使用直接色的点阵图
    </li>
</ul>
<h2>
    设备像素、css像素、设备独立像素、dpr、ppi 之间的区别？
</h2>
<ul>
    <li>
        设备像素：又称为物理像素， 指设备能控制显示的最小物理单位，不一定是一个小正方形区块，也没有标准的宽高，只是用于显示丰富色彩的一个“点”而已
    </li>
    <li>
        css像素： 适用于web编程，在 CSS 中以 px 为后缀，是一个长度单位 。css中长度分为两类：绝对单位和相对单位，px属于相对单位
    </li>
    <li>
        设备独立像素： 与设备无关的逻辑像素，代表可以通过程序控制使用的虚拟像素，是一个总体概念 。我们常说的分辨率，不严谨来讲是指的设备独立像素。在javascript中我们可以通过 window.screen.width/
        window.screen.height 来查看
    </li>
    <li>
        dpr：设备像素比， 代表设备独立像素到设备像素的转换关系
    </li>
    <li>
        ppi：像素密度， 表示每英寸所包含的像素点数目
    </li>
</ul>
<h2>
    谈谈你对BFC的理解？触发条件？应用场景？
</h2>
<p>
    BFC即块级格式化上下文，它是页面中的一块渲染区域，并且有一套属于自己的渲染规则。BFC目的是形成一个相对于外界完全独立的空间，让内部的子元素不会影响到外部的元素。
</p>
<h3>
    触发条件
</h3>
<ul>
    <li>
        根元素，即HTML元素
    </li>
    <li>
        浮动元素：float值为left、right
    </li>
    <li>
        overflow值不为 visible，为 auto、scroll、hidden
    </li>
    <li>
        display的值为inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
    </li>
    <li>
        position的值为absolute或fixed
    </li>
</ul>
<h3>
    应用场景
</h3>
<ul>
    <li>
        防止margin重叠
    </li>
    <li>
        清除内部浮动
    </li>
    <li>
        自适应多栏布局
    </li>
</ul>
<h2>
    怎么理解回流跟重绘？什么场景下会触发？
</h2>
<h3>
    回流
</h3>
<p>
    布局引擎会根据各种样式计算每个盒子在页面上的大小与位置。
</p>
<h4>
    触发条件
</h4>
<ul>
    <li>
        添加或删除可见的DOM元素
    </li>
    <li>
        元素的位置发生变化
    </li>
    <li>
        元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）
    </li>
    <li>
        内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代
    </li>
    <li>
        页面一开始渲染的时候（这避免不了）
    </li>
    <li>
        浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的）
    </li>
</ul>
<h3>
    重绘
</h3>
<p>
    当计算好盒模型的位置、大小及其他属性后，浏览器根据每个盒子特性进行绘制。
</p>
<h4>
    触发条件
</h4>
<ul>
    <li>
        颜色的修改
    </li>
    <li>
        文本方向的修改
    </li>
    <li>
        阴影的修改
    </li>
</ul>
<div class="tips">
    触发回流一定会触发重绘
</div>
<h2>
    如果需要手动写动画，你认为最小时间间隔是多久，为什么？
</h2>
<p>
    多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60*1000ms ＝ 16.7ms。
</p>